<template>
  <div class="table-box">
    <cardPanel title="人员信息" :show="true" @close="onClose">
      <div class="table-content">
        <div
          class="table-item"
          v-for="(item, index) in store.peopleList"
          :key="index"
        >
          <ul class="table-item-left">
            <li>
              <label>姓 名 :</label>
              <p>{{ item["姓名"] || "--" }}</p>
            </li>
            <li>
              <label>性 别 :</label>
              <p>
                {{ (item["性别"] || "").length === 1 ? item["性别"] : "男" }}
              </p>
            </li>
            <!--  <li>
              <label>身份证号:</label>
              <p>{{ item['身份证号'] }}</p>
            </li> -->
            <li>
              <label>年 龄 :</label>
              <p>{{ item["年龄"] || "--" }}</p>
            </li>
            <!-- <li>
              <label>职业:</label>
              <p>{{ item['职业'] }}</p>
            </li> -->

            <li>
              <label>户 主 :</label>
              <p>{{ item["户主"] || "--" }}</p>
            </li>
            <li>
              <label>联系方式 :</label>
              <p>{{ item["联系方式"] || "--" }}</p>
            </li>
          </ul>
          <div class="people-img">
            <img :src="setImgUrl(item['性别'])" />
          </div>
        </div>
      </div>
    </cardPanel>
  </div>
</template>

<script lang="ts" setup>
import { onUnmounted } from "vue";
import cardPanel from "@/components/cardPanel/index.vue";
import { overviewStore } from "@/stores/overview";

const store = overviewStore();

/**
 * 设置图片
 */
const setImgUrl = (sex: string) => {
  sex = (sex || "").length == 1 ? sex : "男";
  const sexName = sex === "男" ? "m" : "w";
  const randomNum = Math.floor(Math.random() * (sex === "男" ? 3 : 4)) + 1;
  console.log("--------------sex", sex);
  console.log("--------------sex111", sexName + randomNum);
  return new URL(
    `../../../assets/image/network/${sexName + randomNum}.png`,
    import.meta.url
  ).href;
};

const onClose = () => {
  store.isShowPeople = false;
  store.peopleList = [];
};

onUnmounted(() => {
  store.peopleList = [];
});
</script>

<style lang="scss" scoped>
.table-box {
  width: 440px;
  height: 700px;
}
.table-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.table-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  &:last-child {
    border-bottom-color: transparent;
  }
}
.table-item-left {
  width: calc(100% - 120px);
  display: flex;
  flex-direction: column;
  li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    label {
      width: 80px;
      display: flex;
      justify-content: flex-end;
      margin-right: 10px;
    }
  }
}

.people-img {
  width: 140px;
  height: 160px;
  display: flex;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
